<template>
  <div class="topic-detail-container">
    <div class="topic-detail-container__search">
      <div class="search-box">
        <div class="search-box__hidden" ref="hideSearchCard" v-if="searchWord&&showHideCard">
          <nuxt-link tag="div" :to="'/topic/detail/'+val.topicName" class="search-box__hidden-item" v-for="(val,index) in topicList" :key="val.topicId">
            <p>#{{val.topicName}}#</p>
            <h6>{{val.referenceCount}}</h6>
          </nuxt-link>
          <div class="search-box__hidden-item" v-if="topicList.length===0">
            <p style="color:#6d61bee8">找不到该话题</p>
          </div>
        </div>
        <input ref="searchInput" placeholder="请输入话题名称" type="text" v-model="searchWord"/>
        <div class="icon-box">
          <yun-icon name="search"></yun-icon>
        </div>

      </div>
    </div>
    <div class="topic-detail-container__main">
      <div class="main__part1">
        <topic-card :activeRouteFunc="false" :info="topicCardInfo" style="border-radius: 4px;overflow: hidden"></topic-card>
        <div class="part1__bottom">
          <div class="__left">
            <nav-wrap
              width="106px"
              :list="list"
            ></nav-wrap>
          </div>
          <div class="__right">
            <release-card :initWord="$route.params.name"  @listenReleaseState="restartPagination()"></release-card>
            <social-card  @listenSocialCardState="restartPagination()" v-for="(val,index) in postList" :key="val.postId" :info="val"></social-card>
            <pagination ref="pagination"  :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>

          </div>
        </div>

      </div>
      <div class="main__part2">
        <card-container
          title="话题发起人"
          width="302px"

        >
          <user-card    style="padding-bottom: 14px;padding-top: 14px" :id="topicCardInfo.userId"></user-card>
        </card-container>

        <card-container
          title="话题贡献排行榜"
          width="302px"
          style="margin-top: 16px;padding-bottom: 15px"
          v-if="userList.length>0"
        >
          <user-card    style="padding-bottom: 2px;padding-top: 2px" v-for="(val,index) in userList" :key="val.userId"  :info="val"></user-card>

        </card-container>
      </div>

    </div>



  </div>
</template>

<script>
  import NavWrap from "../../../components/pc/nav/navWrap";
  import CardContainer from "../../../components/pc/cardContainer";
  import Pagination from "../../../components/pc/pagination";
  import TopicCard from "../../../components/pc/topicCard";
  import ReleaseCard from '../../../components/pc/releaseCard';
  import SocialCard from '../../../components/pc/socialContactCard';
  import UserCard from '../../../components/pc/userCard2';
  import config from '../../../action/config'
  export default {
    components: {TopicCard, Pagination, CardContainer, NavWrap,ReleaseCard,SocialCard,UserCard},

    async asyncData({$axios,params}){
      try {
        let regExp = /^[\u4e00-\u9fa5]/
        let typicName = regExp.test(params.name)?encodeURI(params.name):params.name;


        let TopicDetail = await $axios.$get(config.api.get.Topic.detail+encodeURI(params.name),{
          params:{
            by:'name'
          }
        });

        return {topicCardInfo:TopicDetail.data}
      }catch (e) {
      }

    },

    data(){
      return{
        list: [
          {
            label: '最新',
            address: this.$route.path,
            type: 'new'
          },
          {
            label: '推荐',
            address: this.$route.path,
            type: 'recommends'
          },
          {
            label: '文字',
            address: this.$route.path,
            type: 'word'
          },

          {
            label: '视频',
            address: this.$route.path,
            type: 'video'
          },

          {
            label: '图片',
            address: this.$route.path,
            type: 'picture'
          }
        ],
        topicCardInfo:{},
        postList:[],
        userList:[],
        topicList:[],
        pages:1,
        paginationState:'complate',
        paginationReset:true,
        ownerInfo:{},
        searchWord:'',
        showHideCard:true,
      }
    },
    created() {
      this.dataGetUsers(this.topicCardInfo.topicId);
      this.$router.replace({
        path: this.$route.path,
        query: {
          type: 'new'
        }
      });

      if(process.browser){
        document.addEventListener('click',(e)=>{
          if(this.$refs.hideSearchCard){
            if(!this.$refs.hideSearchCard.contains(e.target)){
              this.showHideCard = false;
            }
          }
        })
      }
    },
    computed: {
      labelTitle: function () {
        return this.$route.query.id + '话题'
      }
    },

    watch:{
      searchWord(val){
        this.dataGetSearchTopic(val)
        this.showHideCard = true;
      },
      $route(){
        this.restartPagination();
      }
    },

    methods:{
      restartPagination(){
        this.postList = [];
        this.pages = 1;

        if(process.browser){
          this.$refs.pagination.setCurrentPage(1)
        }
      },
      dataGetNewDynamic(currentPage){
        this.paginationState = 'loading';
        let name = this.$route.params.name;
        this.$axios.$get(config.api.get.Topic.postList+name+'/posts',{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetRecommendDynamic(currentPage){
        this.paginationState = 'loading';
        let name = this.$route.params.name;
        this.$axios.$get(config.api.get.Topic.recommendsPost+this.topicCardInfo.topicId+'/post/recommends',{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);
            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetWordDynamic(currentPage){
        this.paginationState = 'loading';
        let name = this.$route.params.name;
        this.$axios.$get(config.api.get.Topic.postList+name+'/posts',{
          params:{
            page:currentPage,
            size:10,
            type:0
          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetVideoDynamic(currentPage){
        this.paginationState = 'loading';
        let name = this.$route.params.name;
        this.$axios.$get(config.api.get.Topic.postList+name+'/posts',{
          params:{
            page:currentPage,
            size:10,
            type:1

          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },
      dataGetPictureDynamic(currentPage){
        this.paginationState = 'loading';
        let name = this.$route.params.name;
        this.$axios.$get(config.api.get.Topic.postList+name+'/posts',{
          params:{
            page:currentPage,
            size:10,
            type:2

          }
        }).then((response)=>{
          this.paginationState = 'over';
          if(currentPage===1){
            this.postList = response.data.dataList;
            this.pages  = response.data.totalPage;
          }else{
            let list = response.data.dataList;
            for(let i = 0;i<list.length;i++){
              this.postList.push(list[i]);

            }
            this.pages  = response.data.totalPage;
          }

        })
      },


      changePage(currentPage){
        //返回页数 请求新的数据
        let type = this.$route.query.type;
        if(type==='new'){
          this.dataGetNewDynamic(currentPage);
        }
        if(type==='recommends'){
          this.dataGetRecommendDynamic(currentPage);
        };
        if(type==='word'){
          this.dataGetWordDynamic(currentPage);

        }
        if(type==='video'){
          this.dataGetPictureDynamic(currentPage);

        }
        if(type==='picture'){
          this.dataGetVideoDynamic(currentPage);

        }

      },

      dataGetUsers(topicId){
        this.$axios.$get(config.api.get.Topic.contributes+topicId+'/contributes',{
          params:{
            page:1,
            size:12
          }
        }).then((response)=>{
          this.userList = response.data.dataList;
        })
      },

      dataGetSearchTopic(e){
        this.$axios.$get(config.api.get.Topic.search,{
          params:{
            page:1,
            size:10,
            keywords:e,
          }
        }).then((response)=>{
          this.topicList = response.data.dataList;
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .topic-detail-container{
    div{
      position:relative;
    }
    >.topic-detail-container__search{
      width: 100%;
      height:160*$length;
      background-image: url("../../../assets/img/search_bg.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: repeat;
      @extend %flex-row-center;
      .search-box{
        width:408*$length;
        height:40*$length;
        @extend %flex-row-spb;
        border-radius: 4*$length;
        position: relative;

        input{
          width: 318*$length;
          height:40*$length;
          padding:12*$length 16*$length;
          @include fontStyle(12,40,500,#333,left);
        }
        .icon-box{
          width:90*$length;
          height:40*$length;
          @extend %flex-row-center;
          background-color: #00AAE6;
          @include fontStyle(12,40,500,#333,left);
          @extend %cursorPointer;
          i{
            color:#fff;
            font-size: 12*$font-size;
          }
        }
        .search-box__hidden{
          position: absolute;
          width:408*$length;
          padding: 6*$length 10*$length;
          box-sizing: border-box;
          top:48*$length;
          background-color: #fff;
          z-index: 100;
          .search-box__hidden-item{
            @extend %flex-row-spb;
            padding: 5px 10px;
            background-color: #fff;
            &:hover{
              background-color: #F5F7FA;
            }
            p{
              width:350*$length;
              @include fontStyle(12,24,500,#333,left);
              @extend %animate-transition;
              cursor: pointer;
              overflow: hidden;
              b{
                font-weight: 700;
              }
            }
            h6{
              @include fontStyle(12,24,500,#333,left);

            }
          }

        }

      }
    }
    .topic-detail-container__main{
      width: $pageWidth;
      margin: 0 auto;
      padding-bottom: 32*$length;
      @extend %flex-row-spb;
      align-items: start;
      margin-top: 24*$length;
      .main__part1{
        width:938*$length;
        .part1__bottom{
          @extend %flex-row-spb;
          align-items: flex-start;
          margin-top: 16*$length;
          .__left{
            width:106*$length;
          }
          .__right{
            width:816*$length;
          }
        }

      }
      .main__part2{
        width:302*$length;

      }

    }
  }
</style>
